// @mixin lt-sm {
//   @media screen and (max-width: 575px) {
//     @content;
//   }
// }
// @mixin gt-sm {
//   @media screen and (min-width: 576px) {
//     @content;
//   }
// }

// /* https://medium.com/@ladyleet/adding-box-shadow-z-depth-to-angular-material-2-components-6bd0de303dcb */
// %transition-box-shadown {
//   transition: box-shadow 0.2;
// }
// %z-depth-1 {
//   @extend %transition-box-shadown;
//   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
//     0 3px 1px -2px rgba(0, 0, 0, 0.2);
// }

// %z-depth-2 {
//   @extend %transition-box-shadown;
//   box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
//     0 2px 4px -1px rgba(0, 0, 0, 0.3);
// }

// %z-depth-3 {
//   @extend %transition-box-shadown;
//   box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
//     0 3px 5px -1px rgba(0, 0, 0, 0.3);
// }

// %z-depth-4 {
//   @extend %transition-box-shadown;
//   box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
//     0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
// }

// %z-depth-5 {
//   @extend %transition-box-shadown;
//   box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
//     0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
// }
